<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<html lang="en">
<head>
    <meta charset="utf-8" />
<head>
<base href="<%=basePath%>">

<title>My JSP 'Fun.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="BWSoft">
<meta http-equiv="description" content="BWSoft">
<!-- basic styles -->
<link href="<%=basePath %>admin/assets/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="<%=basePath %>admin/assets/css/font-awesome.min.css" />

<link rel="stylesheet" href="<%=basePath %>admin/assets/css/jquery-ui-1.10.3.custom.min.css" />
<link rel="stylesheet" href="<%=basePath %>admin/assets/css/jquery.gritter.css" />

<!--[if IE 7]>
      <link rel="stylesheet" href="<%=basePath %>admin/assets/css/font-awesome-ie7.min.css" />
    <![endif]-->
<!-- page specific plugin styles -->
<!-- fonts -->
<!-- ace styles -->

<link rel="stylesheet" href="<%=basePath %>admin/assets/css/ace.min.css" />
<link rel="stylesheet" href="<%=basePath %>admin/assets/css/ace-rtl.min.css" />
<link rel="stylesheet" href="<%=basePath %>admin/assets/css/ace-skins.min.css" />
<link rel="stylesheet" href="<%=basePath %>admin/assets/css/messenger.css" />
<link rel="stylesheet" href="<%=basePath %>admin/assets/css/messenger-theme-future.css" />

<!--[if lte IE 8]>
      <link rel="stylesheet" href="<%=basePath %>admin/assets/css/ace-ie.min.css" />
    <![endif]-->
<!-- inline styles related to this page -->
<!-- ace settings handler -->

<script src="<%=basePath %>admin/assets/js/ace-extra.min.js"></script>

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
    <script src="<%=basePath %>admin/assets/js/html5shiv.js"></script>
    <script src="<%=basePath %>admin/assets/js/respond.min.js"></script>
    <![endif]-->
<link href="<%=basePath %>admin/assets/css/backOffice/backOffice.css" rel="stylesheet" />
<style type="text/css">
		/* 选择图标样式的时候的样式 */
        .onClick1 {
            border: solid 1px;
        }

        .onIcon {
            color: red;
        }
    </style>
</head>

<body>
<div id="bgdiv" style="position:absolute; z-index:1000; background-color:white;width:100%;height:100%;">

</div>
	<div class="page-content">
		<div class="page-header">
			<h1
				style="text-align:left;margin: -6px 0px -18px -2px;color: rgb(131, 105, 105);font-family: 微软雅黑;line-height:34px;">
				功能管理</h1>
		</div>

		<div class="row">
			<div class="col-xs-12">

				<div class="table-responsive">
					<button class='btn btn-primary btn-sm' id='butadd'>
						<i class='icon-plus-sign bigger-110'></i> <span
							class='bigger-110 no-text-shadow'>新增功能</span>
					</button>
					<button class='btn btn-danger btn-sm' style='margin-left: 4px'
						id='butdel'>
						<i class='icon-trash bigger-110'></i> <span
							class='bigger-110 no-text-shadow'>删除功能</span>
					</button>
					<button class='btn btn-success btn-sm' style='margin-left: 4px'
						id='buflush'>
						<i class='icon-refresh bigger-110'></i> <span
							class='bigger-110 no-text-shadow'>刷新列表</span>
					</button>
					<table id="sample-table-2"
						class="table table-striped table-bordered table-hover">
						<thead>
							<tr>
								<th class="center"><label> <input type="checkbox"
										class="ace" /> <span class="lbl"></span>
								</label></th>
								<th align="center">编号</th>
								<th align="center">图标</th>
								<th>名称</th>
								<th>URL</th>
								<th align="center">菜单项</th>
								<th align="center"><i class=" icon-cogs"></i> 操作</th>
							</tr>
						</thead>

						<tbody>
							<c:forEach items="${funList}" var="Fun">

								<tr>

									<td class="center"><label> <input type="checkbox"
											class="ace" /> <span class="lbl"></span>
									</label></td>
									<td id="thisID" align="center">${Fun.funID }</td>
									<td align="center"><i class="${Fun.funIcon }"
										style="margin-top: 3px]"> </i></td>
									<td>${Fun.funName }</td>
									<td>${Fun.funUrl }</td>
									<c:if test="${Fun.menuFlag=='true' }">
										<td align="center"><i class='icon-check'></i></td>
									</c:if>
									<c:if test="${Fun.menuFlag =='false'}">
										<td align="center"><i class='icon-check-empty'></i></td>
									</c:if>
									<td align="center">
										<div class="btn-group ">
											<button data-toggle="dropdown"
												class="btn btn-primary dropdown-toggle btn-xs">
												操作 <span class="icon-caret-down icon-on-right"></span>
											</button>

											<ul class="dropdown-menu dropdown-info pull-right"
												style="min-width:77px;">

												<!-- <li><a class="lookup11" style="cursor:pointer;">查看</a></li> -->

												<li><a class="modify11" style="cursor:pointer;">修改</a></li>

												<li><a class="moveup11" style="cursor:pointer;">上移</a></li>
												<li><a class="movedown11" style="cursor:pointer;">下移</a>
												</li>
												<!-- <li><a class="move11" style="cursor:pointer;">移动</a></li> -->

											</ul>

										</div> <!-- /btn-group -->
									</td>
								</tr>
							</c:forEach>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>


<!--Begin Modole-->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title" id="myModalLabel">菜单管理</h4>
                </div>
                <form  id="myModalForm">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-sm-3">
                            <label for="form-field-select-1">父&nbsp;节&nbsp;点</label>
                        </div>
                        <div class="col-sm-7">
                            <select class="form-control" id="ParentFunID" name="fun.parentFunID">
                                <option value="-1">---请选择---</option>
                                <option value="0">根节点</option>
                               <c:forEach items="${funList }"  var="fun">
                                        <option value="${fun.funID }">${fun.funName }</option>
                                 </c:forEach>

                            </select>
                        </div>
                        <i class="icon-lightbulb tooltip-warning cuitooltip" style="color:orange" data-toggle="tooltip" data-placement="right" title="必填" id="tpname"></i>
                    </div>
                    <br />
                    <div class="row">
                        <div class="col-sm-3">
                            <label for="form-field-select-1">名&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;称</label>
                        </div>
                        <div class="col-sm-7">
                            <input type="text" id="FunName"  name="fun.funName" placeholder="菜单名称（例：系统管理）" class="form-control">
                        </div>
                        <i class="icon-lightbulb tooltip-warning cuitooltip" style="color:orange" data-toggle="tooltip" data-placement="right" title="必填" id="tname"></i>
                    </div>
                    <br />
                    <div class="row">
                        <div class="col-sm-3">
                            <label for="form-field-select-1">U&nbsp;&nbsp;&nbsp;R&nbsp;&nbsp;&nbsp;L</label>
                        </div>
                        <div class="col-sm-7">
                            <input type="text" id="FunURL" name="fun.funUrl"  placeholder="菜单URL（例：../XXX/XXX）" class="form-control">
                        </div>
                    </div>
                    <br />
                    <div class="row">
                        <div class="col-sm-3" >
                            <label for="form-field-select-1">图&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;标</label>
                        </div>
                        <div class="col-sm-7">
                            <div class="col-sm-4" style="margin-top:6px;text-align:right;margin-left:-16px">
                                <button class="btn btn-sm btn-warning tooltip-warning" data-toggle='modal' data-target='#iconModal' style="margin-left:-12px" id="icon_but">
                                    <i class="bigger-110"></i>
                                    <span class="bigger-110 no-text-shadow" id="iconbut">请选择图标</span>
                                </button>
                                <input type="hidden" id="FunICON"  name="fun.funIcon"/>
                            </div>
                            <div class="col-sm-8">
                                <div class="col-sm-8" style="margin-top:6px;text-align:right">
                                    <label for="form-field-select-1">菜&nbsp;单&nbsp;项</label>
                                </div>
                                <div class="col-sm-4" style="margin-top:6px">
                                    <label>
                                        <input id="MenuTreeFlag" class="ace ace-switch ace-switch-6" type="checkbox"   name="fun.menuFlag" value="true">
                                        <span class="lbl"></span>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <br />
                    <div class="row">
                        <div class="col-sm-3">
                            <label for="form-field-select-1">描&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;述</label>
                        </div>
                        <div class="col-sm-7">
                            <textarea class="form-control" id="Description"  name="fun.description" placeholder="填写你对这项菜单的描述..." rows="5"></textarea>
                        </div>
                    </div>
                </div>
                    <input type="hidden" id="idHidden" name="fun.funID"/>
                </form>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal" id="but_infoclose">关闭</button>
                    <button type="button" class="btn btn-primary" id="but_saveadd">保存</button>
                    <button type="button" class="btn btn-primary" style="display:none" id="but_savemodify">保存</button>
                </div>
            </div>
        </div>
    </div>
    <!--End Modole-->

 <!--Begin IconModole-->
    <div class="modal fade" id="iconModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title" id="myModalLabel">选择图标</h4>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="iconName" name="fun.funIcon">
                    <div class="row" id="iconrow">
                        <div class="row" id="iconr">
                            <div class="col-xs-6 col-sm-6">
                                <ul class="list-unstyled">
                                    <li>
                                        <i class="icon-adjust"></i>
                                        icon-adjust
                                    </li>

                                    <li>
                                        <i class="icon-asterisk"></i>
                                        icon-asterisk
                                    </li>

                                    <li>
                                        <i class="icon-ban-circle"></i>
                                        icon-ban-circle
                                    </li>

                                    <li>
                                        <i class="icon-bar-chart"></i>
                                        icon-bar-chart
                                    </li>

                                    <li>
                                        <i class="icon-barcode"></i>
                                        icon-barcode
                                    </li>

                                    <li>
                                        <i class="icon-beaker"></i>
                                        icon-beaker
                                    </li>

                                    <li>
                                        <i class="icon-beer"></i>
                                        icon-beer
                                    </li>

                                    <li>
                                        <i class="icon-bell"></i>
                                        icon-bell
                                    </li>

                                    <li>
                                        <i class="icon-bell-alt"></i>
                                        icon-bell-alt
                                    </li>

                                    <li>
                                        <i class="icon-bolt"></i>
                                        icon-bolt
                                    </li>

                                    <li>
                                        <i class="icon-book"></i>
                                        icon-book
                                    </li>

                                    <li>
                                        <i class="icon-bookmark"></i>
                                        icon-bookmark
                                    </li>

                                    <li>
                                        <i class="icon-bookmark-empty"></i>
                                        icon-bookmark-empty
                                    </li>

                                    <li>
                                        <i class="icon-briefcase"></i>
                                        icon-briefcase
                                    </li>

                                    <li>
                                        <i class="icon-bullhorn"></i>
                                        icon-bullhorn
                                    </li>

                                    <li>
                                        <i class="icon-calendar"></i>
                                        icon-calendar
                                    </li>

                                    <li>
                                        <i class="icon-camera"></i>
                                        icon-camera
                                    </li>

                                    <li>
                                        <i class="icon-camera-retro"></i>
                                        icon-camera-retro
                                    </li>


                                </ul>
                            </div>

                            <div class="col-xs-6 col-sm-6">
                                <ul class="list-unstyled">
                                    <li>
                                        <i class="icon-check"></i>
                                        icon-check
                                    </li>

                                    <li>
                                        <i class="icon-check-empty"></i>
                                        icon-check-empty
                                    </li>

                                    <li>
                                        <i class="icon-circle"></i>
                                        icon-circle
                                    </li>

                                    <li>
                                        <i class="icon-circle-blank"></i>
                                        icon-circle-blank
                                    </li>

                                    <li>
                                        <i class="icon-cloud"></i>
                                        icon-cloud
                                    </li>

                                    <li>
                                        <i class="icon-cloud-download"></i>
                                        icon-cloud-download
                                    </li>

                                    <li>
                                        <i class="icon-cloud-upload"></i>
                                        icon-cloud-upload
                                    </li>

                                    <li>
                                        <i class="icon-coffee"></i>
                                        icon-coffee
                                    </li>

                                    <li>
                                        <i class="icon-cog"></i>
                                        icon-cog
                                    </li>

                                    <li>
                                        <i class="icon-cogs"></i>
                                        icon-cogs
                                    </li>

                                    <li>
                                        <i class="icon-comment"></i>
                                        icon-comment
                                    </li>

                                    <li>
                                        <i class="icon-comment-alt"></i>
                                        icon-comment-alt
                                    </li>

                                    <li>
                                        <i class="icon-comments"></i>
                                        icon-comments
                                    </li>

                                    <li>
                                        <i class="icon-comments-alt"></i>
                                        icon-comments-alt
                                    </li>

                                    <li>
                                        <i class="icon-credit-card"></i>
                                        icon-credit-card
                                    </li>

                                    <li>
                                        <i class="icon-dashboard"></i>
                                        icon-dashboard
                                    </li>

                                    <li>
                                        <i class="icon-desktop"></i>
                                        icon-desktop
                                    </li>

                                    <li>
                                        <i class="icon-download"></i>
                                        icon-download
                                    </li>

                                    <li>
                                        <i class="icon-download-alt"></i>
                                        icon-download-alt
                                    </li>
                                </ul>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-xs-6 col-sm-6">
                                <ul class="list-unstyled">
                                    <li>
                                        <i class="icon-edit"></i>
                                        icon-edit
                                    </li>

                                    <li>
                                        <i class="icon-envelope"></i>
                                        icon-envelope
                                    </li>

                                    <li>
                                        <i class="icon-envelope-alt"></i>
                                        icon-envelope-alt
                                    </li>

                                    <li>
                                        <i class="icon-exchange"></i>
                                        icon-exchange
                                    </li>

                                    <li>
                                        <i class="icon-exclamation-sign"></i>
                                        icon-exclamation-sign
                                    </li>

                                    <li>
                                        <i class="icon-external-link"></i>
                                        icon-external-link
                                    </li>

                                    <li>
                                        <i class="icon-eye-close"></i>
                                        icon-eye-close
                                    </li>

                                    <li>
                                        <i class="icon-eye-open"></i>
                                        icon-eye-open
                                    </li>

                                    <li>
                                        <i class="icon-facetime-video"></i>
                                        icon-facetime-video
                                    </li>

                                    <li>
                                        <i class="icon-fighter-jet"></i>
                                        icon-fighter-jet
                                    </li>

                                    <li>
                                        <i class="icon-film"></i>
                                        icon-film
                                    </li>

                                    <li>
                                        <i class="icon-filter"></i>
                                        icon-filter
                                    </li>

                                    <li>
                                        <i class="icon-fire"></i>
                                        icon-fire
                                    </li>

                                    <li>
                                        <i class="icon-flag"></i>
                                        icon-flag
                                    </li>

                                    <li>
                                        <i class="icon-folder-close"></i>
                                        icon-folder-close
                                    </li>

                                    <li>
                                        <i class="icon-folder-open"></i>
                                        icon-folder-open
                                    </li>

                                    <li>
                                        <i class="icon-folder-close-alt"></i>
                                        icon-folder-close-alt
                                    </li>

                                    <li>
                                        <i class="icon-folder-open-alt"></i>
                                        icon-folder-open-alt
                                    </li>

                                    <li>
                                        <i class="icon-food"></i>
                                        icon-food
                                    </li>
                                </ul>
                            </div>

                            <div class="col-xs-6 col-sm-6">
                                <ul class="list-unstyled">
                                    <li>
                                        <i class="icon-gift"></i>
                                        icon-gift
                                    </li>

                                    <li>
                                        <i class="icon-glass"></i>
                                        icon-glass
                                    </li>

                                    <li>
                                        <i class="icon-globe"></i>
                                        icon-globe
                                    </li>

                                    <li>
                                        <i class="icon-group"></i>
                                        icon-group
                                    </li>

                                    <li>
                                        <i class="icon-hdd"></i>
                                        icon-hdd
                                    </li>

                                    <li>
                                        <i class="icon-headphones"></i>
                                        icon-headphones
                                    </li>

                                    <li>
                                        <i class="icon-heart"></i>
                                        icon-heart
                                    </li>

                                    <li>
                                        <i class="icon-heart-empty"></i>
                                        icon-heart-empty
                                    </li>

                                    <li>
                                        <i class="icon-home"></i>
                                        icon-home
                                    </li>

                                    <li>
                                        <i class="icon-inbox"></i>
                                        icon-inbox
                                    </li>

                                    <li>
                                        <i class="icon-info-sign"></i>
                                        icon-info-sign
                                    </li>

                                    <li>
                                        <i class="icon-key"></i>
                                        icon-key
                                    </li>

                                    <li>
                                        <i class="icon-leaf"></i>
                                        icon-leaf
                                    </li>

                                    <li>
                                        <i class="icon-laptop"></i>
                                        icon-laptop
                                    </li>

                                    <li>
                                        <i class="icon-legal"></i>
                                        icon-legal
                                    </li>

                                    <li>
                                        <i class="icon-lemon"></i>
                                        icon-lemon
                                    </li>

                                    <li>
                                        <i class="icon-lightbulb"></i>
                                        icon-lightbulb
                                    </li>

                                    <li>
                                        <i class="icon-lock"></i>
                                        icon-lock
                                    </li>

                                    <li>
                                        <i class="icon-unlock"></i>
                                        icon-unlock
                                    </li>
                                    <li>
                                        <i class="icon-certificate"></i>
                                        icon-certificate
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal" id="closeicon">关闭</button>
                    <button type="button" class="btn btn-primary" id="saveicon">保存</button>
                </div>
            </div>
        </div>
    </div>
    <!--End IconModole-->
    <!--Begin Modole-->
    <div class="modal fade" id="toMoveModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title" id="myModalLabel">移动菜单:<span id="MName"></span>至</h4>
                </div>
                <div class="modal-body" style="padding:45px 0 0 0">
                    <div class="row" style="margin-top:0px">
                        <div class="col-sm-3">
                            <label for="form-field-select-1">父节点</label>
                        </div>
                        <div class="col-sm-7  cuitooltip" data-toggle="tooltip" data-placement="bottom" title="只能选择除自身以外的节点">
                            <select class="form-control" id="MParentFunID">
                                <option value="-1">---请选择---</option>
                                <option value="0">根节点</option>
                               <c:forEach items="${FunList }"  var="Fun">
                                        <option value="${Fun.funID }">${Fun.funName }</option>
                                 </c:forEach>

                            </select>
                            <input type="hidden" id="mTooltipHidden" />
                        </div>
                    </div>
                    <br />

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal" id="but_minfoclose">关闭</button>
                    <button type="button" class="btn btn-primary" id="but_msaveadd">保存</button>
                </div>
            </div>
        </div>
    </div>
    <!--End Modole-->









	<!-- basic scripts -->
	<!--[if !IE]> -->
	<!--<script src="http://cdn.bootcss.com/jquery/2.0.3/jquery.min.js"></script>-->
	<!-- <![endif]-->
	<!--[if IE]>
    <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
    <![endif]-->
	<!--[if !IE]> -->

	<script type="text/javascript">
		window.jQuery
				|| document
						.write("<script src='<%=basePath %>admin/assets/js/jquery-2.0.3.min.js'>"
								+ "<" + "script>");
	</script>

	<!-- <![endif]-->
	<!--[if IE]>
    <script type="text/javascript">
     window.jQuery || document.write("<script src='<%=basePath %>admin/assets/js/jquery-1.10.2.min.js'>"+"<"+"script>");
    </script>
    <![endif]-->

	<script type="text/javascript">
		if ("ontouchend" in document)
			document
					.write("<script src='<%=basePath %>admin/assets/js/jquery.mobile.custom.min.js'>"
							+ "<" + "script>");
	</script>
	<script src="<%=basePath %>admin/assets/js/bootstrap.min.js"></script>
	<script src="<%=basePath %>admin/assets/js/typeahead-bs2.min.js"></script>

	<!-- page specific plugin scripts -->
	<!--[if lte IE 8]>
      <script src="<%=basePath %>admin/assets/js/excanvas.min.js"></script>
    <![endif]-->

	<script src="<%=basePath %>admin/assets/js/jquery-ui-1.10.3.custom.min.js"></script>
	<script src="<%=basePath %>admin/assets/js/jquery.ui.touch-punch.min.js"></script>
	<script src="<%=basePath %>admin/assets/js/jquery.slimscroll.min.js"></script>
	<script src="<%=basePath %>admin/assets/js/bootbox.min.js"></script>
	<script src="<%=basePath %>admin/assets/js/jquery.easy-pie-chart.min.js"></script>
	<script src="<%=basePath %>admin/assets/js/jquery.sparkline.min.js"></script>
	<script src="<%=basePath %>admin/assets/js/flot/jquery.flot.min.js"></script>
	<script src="<%=basePath %>admin/assets/js/flot/jquery.flot.pie.min.js"></script>
	<script src="<%=basePath %>admin/assets/js/flot/jquery.flot.resize.min.js"></script>
	<script src="<%=basePath %>admin/assets/js/jquery.gritter.min.js"></script>
	<!-- ace scripts -->

	<script src="<%=basePath %>admin/assets/js/ace-elements.min.js"></script>
	<script src="<%=basePath %>admin/assets/js/ace.min.js"></script>

	<script src="<%=basePath %>admin/assets/js/jquery.dataTables.min.js"></script>
	<script src="<%=basePath %>admin/assets/js/jquery.dataTables.bootstrap.js"></script>
	<!-- inline scripts related to this page -->
	<script src="<%=basePath %>admin/assets/js/messenger.js"></script>
	<script src="<%=basePath %>admin/assets/js/messenger.min.js"></script>

	<script type="text/javascript" src="<%=basePath %>admin/base/fun/js/js_Fun.js"></script>

	<script type="text/javascript">
		$(function() {
			$(".cuitooltip").tooltip({
				animation : true,
				trigger : 'hover'
			});
		});
	</script>
</body>
</html>
